<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" style="width: 200px;" placeholder="请输入名称" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.user_nickname" style="width: 200px;" placeholder="请输入昵称" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.service_status_flag" placeholder="请选择状态" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in [{ value: null, text: '不限' }, { value: 1, text: '有效' }, { value: 2, text: '冻结' }]" :key="item.value" :label="item.text" :value="item.value"/>
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      stripe
      fit
    >
      <el-table-column align="center" label="名称" width="200" prop="name"/>
      <el-table-column align="center" label="昵称" width="200" prop="nickname"/>
      <el-table-column align="center" label="来源" width="150" prop="user_type">
        <template slot-scope="scope">
          {{ scope.row.user_type | userTypeFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号码" width="150" prop="mobile"/>
      <el-table-column align="center" label="状态" width="100" prop="service_status_flag">
        <template slot-scope="scope">
          <el-tag :type="scope.row.service_status_flag | statusTagFilter">{{ scope.row.service_status_flag | statusMeaningFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色" width="200" prop="roles">
        <template slot-scope="scope">
          {{ scope.row.roles.join(',') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效期" width="150" prop="expiry_date"/>
      <el-table-column align="center" label="备注" width="300" prop="remark"/>
      <el-table-column label="创建时间" width="250" align="center" prop="insert_tms"/>
      <el-table-column label="最后更新时间" width="250" align="center" prop="update_tms"/>
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleViewOrEdit(scope.row, 'view')">查看</el-button>
          <el-button type="text" size="small" @click="handleViewOrEdit(scope.row, 'update')">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-show="total>0" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.page_size" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <edit ref="edit" :dialog-form-visible="dialogFormVisible" :dialog-status="dialogStatus" :form="form" :is-view="isView" @cancel="handleCloseDialog" @reset="resetForm" @closeDialogAndRefresh="handleCloseDialogAndRefresh"/>

  </div>
</template>

<script>
import edit from './edit'
import { getList, del } from '@/api/user'

export default {
  name: 'User',
  components: {
    edit
  },
  filters: {
    statusTagFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger',
        0: 'gray'
      }
      return statusMap[status]
    },
    statusMeaningFilter(status) {
      const statusMap = {
        1: '有效',
        2: '冻结',
        0: '未知'
      }
      return statusMap[status]
    },
    userTypeFilter(type) {
      const map = {
        1: '系统服务用户',
        2: '内部人员',
        3: '客户',
        4: '兼职',
        0: '未知'
      }
      return map[type]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 20,
        name: null,
        user_nickname: null,
        service_status_flag: 1
      },
      total: null,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        view: '查看',
        update: '编辑',
        create: '新增'
      },
      form: {
        id: null,
        name: null,
        nickname: null,
        password: null,
        mobile: null,
        user_type: null,
        expiry_date: null,
        remark: null
      },
      isView: false,
      rules: {
        name: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]
      },
      submitFormLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        console.log(response.data.list)
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 通过过滤条件查询
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 换页
    handleSizeChange(val) {
      this.listQuery.page_size = val
      this.fetchData()
    },
    // 修改每页page_size
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },
    // 弹出新建弹框
    handleCreate() {
      this.resetForm()
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    // 重置弹框表单
    resetForm(oldId) {
      this.form = {
        id: oldId,
        name: null,
        nickname: null,
        password: null,
        mobile: null,
        user_type: null,
        expiry_date: null,
        remark: null
      }
      this.$refs['edit'].clearValidate()
    },
    cancel() {
      this.dialogFormVisible = false
      this.resetForm()
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id: row.id }).then(response => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: `删除成功，删除了ID为${row.id}的数据`
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 弹出查看或者编辑弹框
    handleViewOrEdit(row, handleType) {
      this.form = Object.assign({}, row)
      this.form.expiry_date = new Date(this.form.expiry_date)
      this.dialogStatus = handleType
      this.isView = handleType === 'view'
      this.dialogFormVisible = true
    },
    // 关闭弹框
    handleCloseDialog() {
      this.dialogFormVisible = false
      this.resetForm()
    },
    // 关闭弹框并刷新列表
    handleCloseDialogAndRefresh() {
      this.dialogFormVisible = false
      this.resetForm()
      this.fetchData()
    }
  }
}
</script>
